<template>
	<div id="login">
		
		<div class="form">
			<el-form :model="LoginForm"   class="LoginForm" >
				<el-form-item label="账号" label-width="50px">
					<el-input v-model="LoginForm.email" placeholder="请输入邮箱"></el-input>
				</el-form-item>
				<el-form-item label="密码" label-width="50px">
					<el-input type="password" v-model="LoginForm.password" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-button  class="button" type="primary"  size="middle" @click="submitForm()">登录</el-button>
			</el-form>
		</div>
	</div>
	
</template>

<script>

import SdApi from '../../api/sd';
import Storage from '../../storage';

export default {
    data() {
        return {
            LoginForm: {
                email: '',
                password: ''
            }
        };
    },  
    methods: {
        
        submitForm() {
            SdApi.login(this.LoginForm).then(res=>{
                // console.log(res.data.token);
                Storage.setSession(res.data.token);//存储token
                this.$router.push({path: '/system-manage'});
            });
        }
    },  
};
</script>
<style>
	#login {
		position: relative;
		height: 100%;
		background: url('../../assets/bg.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}
	.form {
		width: 380px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -190px;
		margin-top: -190px;
		border: 1px solid #ccc;	
	}
	.LoginForm {
		padding: 50px;	
	}
	.form button {
		width:300px; 
		margin-top: 20px;
	}
</style>
